<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity" style="padding-bottom: 0px;">
          <el-form-item label="区域合伙人名称">
            <el-input v-model="params.entity.adminName" placeholder="请输入区域合伙人名称"/>
          </el-form-item>
<!--          <el-form-item label="当前代理等级">-->
<!--            <el-input v-model="params.entity.oraCategoryId"-->
<!--                      placeholder="请输入当前用户的代理等级"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="晋升等级">-->
<!--            <el-input v-model="params.entity.categoryId"-->
<!--                      placeholder="请输入晋升等级"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="晋升时间">-->
<!--            <el-input v-model="params.entity.upgradeTime"-->
<!--                      placeholder="请输入晋升时间"/>-->
<!--          </el-form-item>-->
          <el-form-item label="审核状态">
            <el-select v-model="params.entity.verifyFlag" placeholder="请选择审核状态"
                       style="width: 160px;">
              <el-option label="待审核" :value=0></el-option>
              <el-option label="审核通过" :value=1></el-option>
              <el-option label="审核不通过" :value=2></el-option>
            </el-select>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
<!--            <el-button type="primary" :icon="Plus" @click="addDialog">新增</el-button>-->
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading"
              :data="tableData.list" style="width: 100%" height="500"
              :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
<!--      <el-table-column fixed type="selection" width="55"/>-->
<!--      <el-table-column prop="id" label="id"-->
<!--                       show-overflow-tooltip/>-->
      <el-table-column prop="adminName" label="用户名称" show-overflow-tooltip/>
      <el-table-column prop="oraCategoryId" label="代理等级" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{scope.row.oraCategoryIdName}} => {{scope.row.categoryIdName}}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" show-overflow-tooltip/>
      <el-table-column prop="verifyFlagName" label="审核状态"
                       show-overflow-tooltip/>
      <el-table-column prop="verifyTime" label="审核时间"
                       show-overflow-tooltip/>
      <el-table-column prop="verifyRemark" label="审核备注"
                       show-overflow-tooltip/>
<!--      <el-table-column prop="statusFlag" label="用户状态 0-停用 1-启用 2-备用"-->
<!--                       show-overflow-tooltip/>-->
<!--      <el-table-column prop="delFlag" label="删除 0-否 1-是"-->
<!--                       show-overflow-tooltip/>-->
<!--      <el-table-column prop="createUser" label="创建人"-->
<!--                       show-overflow-tooltip/>-->

<!--      <el-table-column prop="updateTime" label=""-->
<!--                       show-overflow-tooltip/>-->
<!--      <el-table-column prop="remark" label="备注"-->
<!--                       show-overflow-tooltip/>-->

      <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
<!--        <template #header>-->
<!--          <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索角色名称/介绍"/>-->
<!--        </template>-->
        <template #default="scope">
<!--          <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">-->
<!--            删除-->
<!--          </el-button>-->

          <el-button link type="primary" :icon="Edit" size="small" @click="openDetail(scope.row)">详情
          </el-button>
<!--          v-if="userInfo.userType == 0 && scope.row.verifyFlag ==0"-->
          <el-button v-if="scope.row.verifyFlag ==0 && userInfo.userType == 0" link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                   :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </el-card>

  <!-- 新增或者修改页面-->
  <SysAdminProxyUpgradeAddOrEdit
      @closeEditDialog="closeEditDialog"
      :addOrEditVisible="addOrEditVisible"
      :ruleForm="ruleForm"
      :addDataType="addDataType"></SysAdminProxyUpgradeAddOrEdit>

  <!--    详情页-->
  <el-drawer v-model="drawer2" direction="rtl" size="80%" :with-header="false">
    <!--    <template #header>-->
    <!--      <h4>审核信息</h4>-->
    <!--    </template>-->
    <template #default>
      <el-tabs v-model="detailDrawerFlag" class="demo-tabs" @tab-click="detailTabsClick">
        <el-tab-pane label="基本信息" name="userInfoMsg">
          <el-card>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
                     :size="formSize" status-icon>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="用户名称" prop="adminId">
                    {{ ruleForm.adminName }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="代理等级" prop="oraCategoryId">
                    <!--            <el-input v-model="ruleForm.oraCategoryId"/>-->
                    {{ ruleForm.oraCategoryIdName }} => {{ ruleForm.categoryIdName }}
                  </el-form-item>
                </el-col>
              </el-row>
              <!--      <el-row>-->
              <!--        <el-col :span="24">-->
              <!--          <el-form-item label="晋升等级" prop="categoryId">-->
              <!--            <el-input v-model="ruleForm.categoryId"/>-->
              <!--          </el-form-item>-->
              <!--        </el-col>-->
              <!--      </el-row>-->
              <el-row>
                <el-col :span="24">
                  <el-form-item label="提交时间" prop="createTime">
                    {{ ruleForm.createTime }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="审核状态" prop="createTime">
                    {{ruleForm.verifyFlagName}}
<!--                    <el-select v-model="ruleForm.verifyFlag" style="width:160px">-->
<!--                      <el-option :label="'待审核'" :value=0 :disabled="true"></el-option>-->
<!--                      <el-option :label="'审核通过'" :value=1></el-option>-->
<!--                      <el-option :label="'审核不通过'" :value=2></el-option>-->
<!--                    </el-select>-->
                  </el-form-item>
                  <!--          <el-form-item label="审核状态 0-待审核 1-审核通过 2-审核不通过" prop="verifyFlag">-->
                  <!--            <el-input v-model="ruleForm.verifyFlag"/>-->
                  <!--          </el-form-item>-->
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="审核备注" prop="verifyRemark">
                    {{ruleForm.verifyRemark}}
<!--                    <el-input type="textarea" v-model="ruleForm.verifyRemark"/>-->
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="晋升明细" name="groupCustomer">
          <el-table :data="groupTables"
                    style="width: 100%">
            <el-table-column type="index" width="60" label="序号" align="center"/>
            <el-table-column prop="name" label="区域合伙人名称" show-overflow-tooltip>
              <template #default="scope1">
                {{ scope1.row.adminName || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="categoryName"  label="代理等级" align="center"/>
          </el-table>
        </el-tab-pane>

<!--        <el-tab-pane label="团队商户" name="third">-->
<!--          <span style="color: red">审核通过的商户才算团队商户</span>-->
<!--          <el-table :data="shopTables" style="width: 100%">-->
<!--            &lt;!&ndash;              <el-table-column prop="id" label="ID" show-overflow-tooltip/>&ndash;&gt;-->
<!--            <el-table-column prop="adminName" label="归属用户" show-overflow-tooltip>-->
<!--              <template #default="scope1">-->
<!--                  <span v-if="ruleForm.id == scope1.row.adminId" style="color: red">-->
<!--                   * {{ scope1.row.adminName || '' }}-->
<!--                  </span>-->
<!--                <span v-else>-->
<!--                    {{ scope1.row.adminName || '' }}-->
<!--                  </span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="shopSourceName" label="商户来源" show-overflow-tooltip/>-->
<!--            <el-table-column prop="poiName" label="归属门店名称" show-overflow-tooltip/>-->
<!--            <el-table-column prop="address" label="门店地址" show-overflow-tooltip/>-->
<!--            <el-table-column prop="latitude" label="维度" show-overflow-tooltip/>-->
<!--            <el-table-column prop="longitude" label="经度" show-overflow-tooltip/>-->
<!--            <el-table-column prop="accountName" label="归属账户" show-overflow-tooltip/>-->
<!--            <el-table-column prop="examineVerifyName" label="审核状态" show-overflow-tooltip/>-->
<!--          </el-table>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="我的订单" name="fourth">-->
<!--          <span style="color: red">商户审核通过产生的订单</span>-->
<!--          <el-table :data="orderTables" style="width: 100%">-->
<!--            <el-table-column prop="orderId" label="订单号" show-overflow-tooltip/>-->
<!--            &lt;!&ndash;              <el-table-column prop="accountId" label="账户信息" show-overflow-tooltip/>&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-table-column prop="accountName" label="账户名称" show-overflow-tooltip/>&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-table-column prop="poiId" label="门店ID" show-overflow-tooltip/>&ndash;&gt;-->
<!--            <el-table-column prop="poiName" label="门店名称" show-overflow-tooltip/>-->
<!--            <el-table-column prop="adminName" label="归属用户" show-overflow-tooltip/>-->
<!--            &lt;!&ndash;              <el-table-column prop="num" label="商品数量" show-overflow-tooltip/>&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-table-column prop="productId" label="商品ID" show-overflow-tooltip/>&ndash;&gt;-->
<!--            <el-table-column prop="productName" label="商品名称" show-overflow-tooltip/>-->
<!--            <el-table-column prop="orderTypeName" label="订单类型" show-overflow-tooltip/>-->
<!--            <el-table-column prop="orderStatusName" label="订单状态" show-overflow-tooltip/>-->
<!--            &lt;!&ndash; <el-table-column prop="originalAmount" label="订单原始金额" show-overflow-tooltip/>&ndash;&gt;-->
<!--            <el-table-column prop="receiptAmount" label="订单实收金额(核心)" width="100" show-overflow-tooltip/>-->
<!--            <el-table-column prop="payTime" label="订单时间" show-overflow-tooltip/>-->
<!--          </el-table>-->
<!--        </el-tab-pane>-->
      </el-tabs>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="closeDetail">关闭</el-button>
      </div>
    </template>
  </el-drawer>

</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, computed, reactive, ref} from 'vue'
import {Params, Result} from "@/apis/model/common/common.interfaces"
import {Delete, Edit, Search, Share, Upload, Plus, Setting} from '@element-plus/icons-vue'
import SysAdminProxyUpgradeAddOrEdit from './sysAdminProxyUpgradeAddOrEdit.vue'
import {SysAdminProxyUpgrade}
  from "@/apis/model/proxy/SysAdminProxyUpgradeModel";
import {deleteSysAdminProxyUpgradeById, sysAdminProxyUpgradePage} from "@/apis/http/proxy/SysAdminProxyUpgradeHttp";
import {userStore} from "@/store";
import {Admin} from "@/apis/model/system/AdminModel";
import {adminGroupTableTree} from "@/apis/http/system/AdminHttp";
import {proxyUpgradeDetailList} from "@/apis/http/proxy/AdminProxyUpgradeDetailHttp";

const store = userStore();
const userInfo = store.userInfo;

const drawer2 = ref(false)
const detailDrawerFlag = ref('userInfoMsg')
const groupTables = ref([])
// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {
    userType: userInfo.userType
  } as SysAdminProxyUpgrade
})

const ruleForm = ref<SysAdminProxyUpgrade>({} as SysAdminProxyUpgrade)

// AddOrEditVisible
const addOrEditVisible = ref(false)

// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('add');

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true
  sysAdminProxyUpgradePage(params).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as SysAdminProxyUpgrade
  addDataType.value = 'add'
}

//修改弹窗
const editDialog = (row:
                        SysAdminProxyUpgrade
) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

// 关闭修改弹窗
const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
      '是否删除?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteSysAdminProxyUpgradeById(id).then((res: Result) => {
      const code = res.code;
      if (code == 200) {
        ElMessage({
          message: '删除数据成功！',
          type: 'success',
        })
        initList();
      } else {
        ElMessage.error('删除数据失败！');
      }
    })
  }).catch(() => {
    // ElMessage({
    //   type: 'info',
    //   message: 'Delete canceled',
    // })
  })
}



const findGroupList = (adminId: number) => {
  proxyUpgradeDetailList(adminId).then(res => {
    groupTables.value = res.data;
  })
}

const openDetail = (row: any) => {
  ruleForm.value = row;
  findGroupList(ruleForm.value.id);
  // findShopList(ruleForm.value.id);
  // findOrderList(ruleForm.value.id);
  drawer2.value = true
}


const closeDetail = () => {
  ruleForm.value = {} as Admin;
  drawer2.value = false
}


onMounted(() => {
  initList()
})
</script>

<style>
</style>
